<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="../../../../../vue2.0/dist/vue.js"></script>
	</head>
	<body>
		<div id="app">
			
		</div>
		
		
	</body>
	<script>
		var vm = new Vue({
 el: '#app',
 /*
  data选项中的数据：
  1.haiZeiTuan_Name --> 海贼团名称
  2.船员的名称 = 海贼团名称（草帽海贼团） + 船员名称（例如索隆）
  
  这些数据里存在这种关系：
  （多个）船员名称数据 --> 依赖于 --> （1个)海贼团名称数据
  一个数据变化 ---> 多个数据全部变化
 */
 data: {
  haiZeiTuan_Name: '草帽海贼团',
  suoLong: '草帽海贼团索隆',
  naMei: '草帽海贼团娜美',
  xiangJiShi: '草帽海贼团香吉士'
 },
 /*
  在watch中，一旦haiZeiTuan_Name（海贼团名称）发生改变
  data选项中的船员名称全部会自动改变 （suoLong，naMei，xiangJiShi）
  并把它们打印出来
 */
 watch: {
  haiZeiTuan_Name: function (newName) {
   this.suoLong = newName + '索隆'
   this.naMei = newName + '娜美'
   this.xiangJiShi = newName + '香吉士'
   console.log(this.suoLong)
   console.log(this.naMei)
   console.log(this.xiangJiShi)
  }
 }
})
  
// 更改watch选项中监控的主数据
vm.haiZeiTuan_Name = '3333'
	</script>
</html>
